{include file='public:header-css'/}
<body>
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <!--左侧导航-->
        <div class="lyear-layout-sidebar-scroll"></div>
        <!--End 左侧导航-->
        <!--页面主要内容-->
        <div id="app">
            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-toolbar">
                            <div class="toolbar-btn-action">
                                <a class="btn btn-label btn-theme" href="javascript:;" @click="confirm()"><label><i
                                        class="mdi mdi-checkbox-marked-circle-outline"></i></label> 确定</a>
                            </div>
                            <div class="card-toolbar-center">
                                <a href="" class="table-btn btn-dark"><i class="mdi mdi-replay"></i></a>
                                <button class="table-btn btn-theme">共{$list->total()}条记录
                                    当前第{$list->currentPage()}页
                                </button>
                            </div>
                            <form class="table-form" method="post" action="">
                                <div class="table-form-group">
                                    <input type="text" value="{$Request.param.keyword}" name="keyword"
                                           placeholder="查询商品名称">
                                    <button class="btn btn-default" type="submit">搜索</button>
                                </div>
                            </form>
                        </div>
                        <div class="card-body">
                            <table class="table table-bordered table-striped table-hover">
                                <thead>
                                <tr>
                                    <th style="width: 90px">操作</th>
                                    <th>ID</th>
                                    <th>商品名称</th>
                                    <th>商品价格</th>
                                    <th>商品运费</th>
                                    <th>商品图片</th>
                                    <th>创建时间</th>
                                    <th>更新时间</th>
                                </tr>
                                </thead>
                                <tbody>
                                {if $list->isEmpty()}
                                <tr>
                                    <td class="no-data" colspan="50">
                                        <i class="mdi mdi-alert-decagram"></i>没有符合条件的记录
                                    </td>
                                </tr>
                                {else/}
                                <tr v-for="(item,index) in goods_list" :key="index">
                                    <td>
                                        <label class="lyear-radio radio-danger">
                                            <input type="radio" name="goods_id" :value="index" @change="change">
                                            <span>选择</span>
                                        </label>
                                    </td>
                                    <td>{{item.goods_id}}</td>
                                    <td>{{item.goods_name}}</td>
                                    <td>{{item.goods_price}}</td>
                                    <td>{{item.ship_price}}</td>
                                    <td class="img"><img title="点击图片看大图" data-toggle="tooltip" class="table-img" :src="item.goods_img"></td>
                                    <td>{{item.add_time}}</td>
                                    <td>{{item.update_time}}</td>
                                </tr>
                                {/if}
                                </tbody>
                            </table>
                            <!--分页-->
                            <div class="page">
                                {$page|raw}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--End 页面主要内容-->
    </div>
</div>
<style>
    .lyear-radio{
        padding-left: 10px;
        margin: 0 auto;
    }
</style>
<!--图片预览插件-->
<script type="text/javascript">
    var _this;
    var app = new Vue({
        el: '#app',
        data: {
            goods_index:-1,
            goods_list: JSON.parse('{:json_encode($list->items())}')|| [],
        },
        created() {
            _this=this
        },
        methods: {
            change(e){
                let value=e.target.value
                _this.goods_index=value
            },
            confirm(){
                if(_this.goods_index==-1){
                    showErrorMsg('请选择礼品')
                    return
                }
                window.parent.confirmLpGoods(_this.goods_list[_this.goods_index]);
            }
        }
    });
    $(function () {
        layer.photos({
            photos: '.img'
            ,anim: 5
        });
    });
</script>
</body>
</html>
